<!DOCTYPE html>
<html     >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">

    <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../css/global.css" media="all"/>

</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 page-container">
    <header class="form-filter-wrap">
        <form class="layui-form form-inline" onsubmit="return false">
            <div class="form-group">
                <div class="form-filter">
                    <div class="form-inner">
                        <label class="layui-form-label">标题：</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input id="subject" type="text" style="width: 190px;" class="form-control" placeholder="标题">
                        </div>
                    </div>
                    <div class="form-inner">
                        <label class="layui-form-label">开始时间：</label>
                        <div class="layui-input-inline">
                            <input type="text" style="width: 120px;" class="form-control" placeholder="开始时间"
                                   id="beginTime">
                        </div>
                    </div>
                    <div class="form-inner">
                        <label class="layui-form-label">结束时间：</label>
                        <div class="layui-input-inline">
                            <input type="text" style="width: 120px;" class="form-control" placeholder="结束时间"
                                   id="endTime">
                        </div>
                    </div>
                    <button id="searchBt" class="layui-btn layui-btn-sm" permission="mail:all:query"><i
                            class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>
                <div class="form-btn">
                    <button class="layui-btn layui-btn-sm" onclick="location.href='addMail.html'"
                            permission="job:add">
                        <i class="layui-icon">&#xe608;</i> 添加
                    </button>
                </div>
            </div>
        </form>
    </header>

    <div class="content-container">
        <div class="widget-body no-padding">
            <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                <thead>
                <tr>
                    <th hidden>id</th>
                    <th style="width: 30%">标题</th>
                    <th>内容</th>
                    <th style="width: 20%">时间</th>
                    <th style="width: 10%">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript" src="../../js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>

<script type="text/javascript">
    var pers = checkPermission();
    layui.use(['layer', 'laydate'], function () {
        var layer = layui.layer;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginTime'
        });
        laydate.render({
            elem: '#endTime'
        });
    });

    var example;

    function init() {
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "ordering": false,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/mails",
                    "type": "get",
                    "data": function (d) {
                        d.subject = $('#subject').val();
                        d.beginTime = $('#beginTime').val();
                        d.endTime = $('#endTime').val();
                    },
                    "error": function (xhr, textStatus, errorThrown) {
                        var msg = xhr.responseText;
                        console.log(msg);
                        var response = JSON.parse(msg);
                        var code = response.code;
                        var message = response.message;
                        if (code == 400) {
                            layer.msg(message);
                        } else if (code == 401) {
                            localStorage.removeItem("token");
                            layer.msg("token过期，请先登录", {shift: -1, time: 1000}, function () {
                                location.href = '/login.html';
                            });
                        } else if (code == 403) {
                            console.log("未授权:" + message);
                            layer.msg('未授权');
                        } else if (code == 500) {
                            layer.msg('系统错误：' + message);
                        }
                    }
                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'table-bottom col-sm-10 col-xs-12 hidden-xs'i><'table-bottom col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {"data": "subject", "defaultContent": ""},
                    {
                        "data": "content",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            var content = row['content'];
                            var c = removeHTMLTag(content);
                            return c;
                        }
                    },
                    {"data": "createTime", "defaultContent": ""},
                    {
                        "data": "content",
                        "defaultContent": "",
                        "orderable": false,
                        "render": function (data, type, row) {
                            var id = row['id'];
                            var href = "mailDetail.html?id=" + id;
                            return "<button class='layui-btn layui-btn-xs' title='编辑' onclick='window.location=\"" + href + "\"'>详情</button>";
                        }
                    },
                ],
                "order": [[3, "desc"]]
            });
    }

    function removeHTMLTag(str) {
        var content = str;
        str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
        str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
        str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多余空行
        str = str.replace(/ /ig, '');//去掉

        if (str.length > 60) {
            str = str.substr(0, 60) + "...";
        }
        return str;
    }

    $("#searchBt").click(function () {
        example.ajax.reload();
    });

    init();
</script>